import React, { Component } from 'react';
import { Switch, Form, Input, Select, Card, Button } from 'antd';
import { inject, observer } from 'mobx-react';
import ThemeColor from './ThemeColor';
import BlockCheckbox from './BlockCheckbox';
import { getCfgList } from '../../components/Cfg/LayoutCfg';
import {layoutCfg, menuCfg} from '../service/Cfg';

@inject('store')
@observer
class LayoutView extends Component {

  formRef = React.createRef();

  componentDidMount() {
    const { store } = this.props;
    store.form = this.formRef.current;
  }

  saveLayoutCfgHandler = async () => {
    try {
      let values = await this.formRef.current.validateFields();
      this.props.store.saveLayoutCfgHandler(getCfgList(values));
      localStorage.setItem('themeColor', values['layout.theme.color'])
    } catch (e) {
      console.log(e);
    }
  };

  restoreDefaultLayoutCfgHandler = async () => {
    await this.props.store.restoreDefaultLayoutCfgHandler();
    this.formRef.current.setFieldsValue(this.props.store.layoutCfg);
  };


  render() {
    const layout = { labelCol: { span: 6 }, wrapperCol: { span: 18 } };
    const { store } = this.props;
    const editData = store.layoutCfg;

    return (
      <Card title='系统布局' bordered={false}>
        <Form ref={this.formRef} {...layout} style={{ width: 500 }}>
          <Form.Item label="系统主题" name='layout.theme.color'>
            <ThemeColor/>
          </Form.Item>
          <Form.Item label="系统布局" name='layout'>
            <BlockCheckbox list={layoutCfg} onChange={(key) => store.changeLayoutHandler(key)}/>
          </Form.Item>
          <Form.Item label="菜单风格" name='layout.menu.theme'>
            <BlockCheckbox list={menuCfg}/>
          </Form.Item>
          <Form.Item label="顶置一级菜单" name='layout.sider.topFirstLevelMenu' valuePropName='checked'>
            <Switch disabled={editData.layout == 'sider' ? false : true}/>
          </Form.Item>
          <Form.Item label="侧边菜单宽度" name='layout.sider.leftMenuWidth'>
            <Input disabled={editData.layout == 'sider' ? false : true} style={{ width: 200 }} autoComplete='off'
                   addonAfter='px'/>
          </Form.Item>
          <Form.Item label="内容区域宽度" name='layout.top.width'>
            <Select style={{ width: 200 }} disabled={editData.layout == 'sider' ? true : false}>
              <Select.Option value="fixed">定宽</Select.Option>
              <Select.Option value="flow">流式</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item style={{ marginLeft: 80 }}>
            <Button type='primary' style={{ marginRight: 5 }} onClick={this.saveLayoutCfgHandler}>保存设置</Button>
            <Button onClick={this.restoreDefaultLayoutCfgHandler}>恢复默认设置</Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}

export default LayoutView;
